<template>
   <div class="p10 mt10 bg-white">
        <p>用户增长趋势  <small class="color-6d727a">{{times}}</small></p>
        <div class="user-common-flex">
            <div class="chart-avg" style="width:300px;">
                <dl>
                     <dt class="fs30 color-6d727a"><i class="el-icon-document"></i></dt>
                     <dd class="fs30 mt20 color-00aeff">{{avgCount}}</dd>
                    <dd class="mt10">平均值</dd>
                </dl>
            </div>
            <div class="chart flex">
                <div id="main" style="height:400px;"></div>
            </div>
            <div class="chart-tab" style="width:200px;">
                <ul>
                    <li 
                    v-for="item of typeMenu" 
                    :key="item.name"  
                    @click="clickChangeType(item)"
                    :class="[item.isActive?'blue-bg_00aeff':'']">
                    {{item.name}}
                    </li>
                   
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import service from "@/service/index_c";
var echarts = require("echarts");
export default {
  data() {
    return {
      isActive: true,
      times: "",
      avgCount: 0,
      typeMenu: [
        {
          name: "整体增长",
          type: "",
          isActive: true
        },
        {
          name: "PC增长",
          type: 1,
          isActive: false
        },
        {
          name: "安卓增长",
          type: "2",
          isActive: false
        },
        {
          name: "IOS增长",
          type: "3",
          isActive: false
        }
      ]
    };
  },
  mounted() {
    this.resizeWorldMapContainer();

    this.queryChartTotalData();
  },
  methods: {
    clickChangeType(item) {
      for (let it of this.typeMenu) {
        it.isActive = false;
      }
      item.isActive = true;
      this.queryChartTotalData(item.type);
    },
    async queryChartTotalData(client = 1) {
      let res = await service.haiheiServerDataUserGraphNear({
        client: client,
        proxyDay_biQuery: 30
      });
      if (res.success) {
        this.avgCount = res.result.avgCount;
        this.times = res.time;
        this.queryChartData(res.result.dayList, res.result.dataList);
      }
    },
    resizeWorldMapContainer() {
      let worldMapContainer = document.getElementById("main");
      worldMapContainer.style.width = window.innerWidth - 700 + "px";
    },
    queryChartData(xAxis, series) {
      // 基于准备好的dom，初始化echarts实例
      let worldMapContainer = document.getElementById("main");
      var myChart = echarts.init(worldMapContainer);
      // 绘制图表
      myChart.setOption(
        {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985"
              }
            }
          },

          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: xAxis
            }
          ],
          yAxis: [
            {
              type: "value"
            }
          ],
          series: [
            {
              name: " 用户增长趋势",
              type: "line",
              stack: "总量",
              areaStyle: { normal: {} },
              symbol: "circle",
              symbolSize: 10,
              data: series,
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 3,
                    color: "#00aeff"
                  },
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#00aeff" },
                    // {offset: 0.5, color: '#bae9ff'},
                    { offset: 1, color: "#d1f0ff" }
                  ])
                }
              }
            }
          ]
        },
        true
      );
    }
  }
};
</script>

<style scoped>
.blue-bg_00aeff {
  background: #00aeff !important;
}
.user-common-flex {
  display: flex;
  justify-content: space-between;
}
.chart-avg,
.chart-tab {
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-tab li {
  padding: 10px 0;
  width: 80px;
  text-align: center;
  margin-top: 10px;
  color: #fff;
  cursor: pointer;
  background: #b1bdd1;
}
</style>